<template>
	<view class="myspace">
		<u-navbar 
			title="个人空间"
			:border-bottom="false"  
		></u-navbar>
		<view class="info-box" >
			<view>
				<u-avatar :src="pic" size="120" style="margin-right: 10px;"></u-avatar>
			</view>
			<view class="info-box__username">username</view>
			<view class="info-box__information">
				<view  class="info-box__information__edit" @click="editInfo">编辑个人信息</view>
				<view  class="info-box__information__QRcode" @click="toQRcode">
					<u-icon size="40"name="account" color="#00438c"></u-icon>
				</view>
				
			</view>
		</view>
			
			<view class="mySpace-box">
				<view>
				<u-tabs-swiper class="mySpace-box__tabs" ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
				:heght="20"
				 swiperWidth="750"
				 bar-width="150"
				 inactive-color="#838383"
				 ></u-tabs-swiper>
				</view>
				<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
					<swiper-item  v-for="(activities,index) in activityData">
						
					<scroll-view class="mySpace-box__activities" scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
							<view class="mySpace-box__activities__message" v-if="activities.list.length==0">暂无活动</view>
							<v-activityBox v-for="(activity,index) in activities.list"
								:title="activity.title"
								:description="activity.description"
								:time="activity.time">
							</v-activityBox>
						</scroll-view>
					</swiper-item>
ew>
					</swiper-item>
				</swiper>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import activityData from './myspaceData.js'
	import activityBox from '../../../component/activityBox.vue'
	export default {
		components:{
			'v-activityBox':activityBox,
		},
		data() {
			return {
				pic:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F18%2F20180818161301_ruicu.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622709638&t=1d1aedf3caf6a31834f1dc9545688760",
				stickTop: false,
				stickArticleTabs:false,
				activityData:activityData,
				list: [{
						name: '动态'
					}, {
						name: '参与话题'
					}, {
						name: '参与活动'
					}],
					// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
					current: 0, // tabs组件的current值，表示当前活动的tab选项
					swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			}
		},
		methods: {
			editInfo(){
				
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
		
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				console.log(this.current)
				console.log(this.swiperCurrent)
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			},
			toQRcode(){
				
			}
			
		}
	}
</script>

<style lang="less">
.info-box{
	padding-top: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	&__username{
		font-size: large;
		font-weight: bold;
	}
	&__information{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20px;
		
		&__edit:hover{
			color: #f7fffd;
			background-color: #00438c;
		}
		
		&__edit{
			// height: 20px;
			// width: 100px;
			// font-size: 7px;
			margin-right: 10px;
			padding:5px  10px 5px 10px ;
			text-align: center;
			font-size: small;
			border-radius: 15px;
			// border: 1px solid #00438c;
			color: #00438c;
			background-color: #ebf5ff;
		}
		&__QRcode{
	
		}
	}
}
.mySpace-box{
	&__tabs{
		box-shadow: 0px 1px 1px #d3d3d3;
	}
	&__activities{
		padding-top: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		&__message{
			margin: 60px;
			text-align: center;
		}
	}
}
</style>
